<script setup lang="ts">
import type { ConsultType } from '@/enums';
import ConsultItem from './ConsultOrderItem.vue'
import { getConsultOrderList } from '@/services/consult'
import { ref } from 'vue'
import type { ConsultOrderItem, ConsultOrderListParams } from '@/types/consult';
// 接收问诊类型
const props = defineProps<{
  type: ConsultType
}>()

// 获取订单参数
const params = ref<ConsultOrderListParams>({
  current: 1,
  pageSize: 10,
  type: props.type
})
// 订单列表数据
const list = ref<ConsultOrderItem[]>([])

const loading = ref(false)
const finished = ref(false)
// 触发时机：首次列表非满屏时会触发一次，后面每次触底都会触发
const onLoad = async () => {
  const { data } = await getConsultOrderList(params.value)
  // 将数据累加到list中去
  list.value.push(...data.rows)
  // list.value = [...list.value, ...data.rows]
  // 判断是否是最后一页
  if (params.value.current >= data.pageTotal) {
    // 没有更多
    finished.value = true
  } else {
    // 改变页面
    params.value.current++
  }
  loading.value = false
}

// 删除订单
const onDelete = (id: string) => {
  list.value = list.value.filter(item => item.id !== id)
}


</script>

<template>
  <div class="consult-list">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <consult-item @on-delete="onDelete" v-for="item in list" :key="item.id" :item="item"></consult-item>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.consult-list {
  padding: 10px 15px;
}
</style>